<jsp:include page="includes/header.jsp" />

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>

<sec:authentication property="name" var="userName" />
<c:set var="webContext" value="${pageContext.request.contextPath}" />
<c:set var="ipServer" value="192.168.1.149" />

<section class="title">
	<div class="container">
		<div class="row-fluid">
			<div class="span6">
				<h1>Clase Online</h1>
			</div>
			<div class="span6">
				<ul class="breadcrumb pull-right">
					<li><a href="/">Home</a> <span class="divider">/</span></li>
					<li class="active">Clase Online</li>
				</ul>
			</div>
		</div>
	</div>
</section>
<!-- / .title -->

<section id="realidad-aumentada" class="container">
							
<div class="well" id="well-class">
	<video autoplay style="display: none;"></video>
	<img id='miImg' width="800px" height="600px">
	<script src="http://${ipServer}:8585/socket.io/socket.io.js"></script>
	<script>
		var websocket = io
					.connect("http://${ipServer}:8585");
			websocket.on('setFrame', proc);
			function proc(img) {
				document.querySelector('#miImg').src = img;
			};
	</script>
</div>

<div class="well well-chat-class" id="well-chat-class">
	<div class="chat">
		<form action="">
			<input type="text" class="chat-name" readonly="readonly" value="${userName}" />
			<div class="chat-messages">
	
			</div>
			<textarea class="chat-textarea" id="messageSend" placeholder="Escribe un mensaje"></textarea>
<!-- 			<div class="chat-status">Estado: <span>Inactivo</span></div> -->
		</form>
		<script>
	    	$(document).ready(function(){
	    		var getNode = function(s){
	    			return document.body.querySelector(s);
	    		}
	    		
	    		//status = getNode('.chat-status span');
	    		textarea = getNode('.chat textarea');
	    		chatName = getNode('.chat-name');
	    		
	    		statusDefault = $(".chat-status span").text();
	    		
	    		var setStatus = function(s){
	    			$(".chat-status span").text(s);
	    			
	    			if(s !== statusDefault){
	    				var delay = setTimeout(function(){
	    					setStatus(statusDefault);
	    					clearInterval(delay);
	    				}, 3000);
	    			}
	    		}
	    		
	    		try {
					var chatSocket = io.connect("http://${ipServer}:3000");
				} catch (e) {
					// TODO: handle exception
				}
				
				if(chatSocket !== undefined){
					
					chatSocket.on('output', function(data){
						$(".chat-messages").append('<li>'+data.name+': '+data.message+'</li>');
					});
					
					chatSocket.on('status', function(data){
						setStatus((typeof data === 'object') ? data.message : data);
						
						if(data.clear === true){
							textarea.value = '';
						}
					});
					
					textarea.addEventListener('keydown', function(event){
						var self = this,
							name = chatName.value;
						
						if(event.which === 13 && event.shiftKey === false){
							chatSocket.emit('input', {
								name: name,
								message: self.value
							});
							
							event.preventDefault();
						}
					});
				}
	    	});
	    </script>
	</div>
</div>

</section>


<jsp:include page="includes/footer.jsp" />